@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei";
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
  overflow-y: hidden;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  outline: none;
  text-decoration: none;
  color: #4CA4FE;
}

div:focus {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.ai-center {
  align-items: center;
}

.jc-center {
  justify-content: center;
}

.jc-between {
  justify-content: space-between;
}

.jc-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
}

//滚动条样式
//滚动条的宽度
r::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #e5e3e7;
  border-radius: 3px;
}

//滚动条的宽度
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #e5e3e7;
  border-radius: 3px;
}

.iframeLoading {
  top: 100px;
}

//main-container全局样式
.app-main {
  min-height: 100%
}

.app-container {
  padding: 20px;
}

//列表头统计背景
.bg-static {
  background: #f7f7f7;
  padding: 10px;

  .card-panel-num {
    color: #205FA9;
  }
}

//列表展开详情
.detail-content p {
  line-height: 25px;
}

.content-analog-chart {
  width: 100%;
  height: 200px;
}

.list-content {
  position: relative;
  margin: 10px;
}

.list-content-detailList {
  position: absolute;
  z-index: 111;
  top: 0;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

//表单样式
.el-dialog__header {
  padding: 20px 20px 20px;
  text-align: center;
}

.verifyidentity-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-select,
.el-input,
.el-date-editor.el-input,
.el-textarea {
  font-size: 14px;
  width: 100%;
}

textarea {
  font-family: inherit;
}

/* .user-info-form .el-form-item {
  margin-bottom: 5px;
} */
.el-dialog__body {
  padding: 0 20px;
}

.user-info-form .el-button--primary {
  background-color: rgba(68, 107, 222, 1);

  &.is-disabled {
    background-color: #a0cfff;
  }
}

.user-info-form .el-button--primary:focus,
.user-info-form .el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;

  &.is-disabled {
    background-color: #a0cfff;
  }
}

.user-info-form .verifyidentity-button {
  float: right;
}

.user-info-form .el-form--label-top .el-form-item__label {
  padding: 0;
}

.user-info-form .multi-line {
  position: relative;
}

.user-info-form .multi-line .multi-line-form {
  display: flex;
  margin-bottom: 15px;
  justify-content: space-between;
}

.user-info-form .multi-line .multi-line-button {
  position: absolute;
  top: -43px;
  left: 480px;
}

.user-info-form .limit {
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: right;

  span {
    color: #ee2a7b;
  }
}

.user-info-form .line {
  text-align: center;
}

.ql-snow .ql-editor img {
  max-width: 480px;
}

.ql-editor .ql-video {
  max-width: 480px;
  width: 100%;
  min-height: 300px;
  position: relative;
}

//警情推送弹窗class
.el-dialog.dialog-pushAlarm {
  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    background-color: rgba(72, 75, 77, 0.9);
  }

  .dialog-content {
    color: #fff;
    font-size: 18px;
  }

  .el-dialog__footer {
    text-align: right;
    padding: 10px;
  }

  .dialog-title {
    font-size: 20px;
    color: #ff2626 !important;
    font-weight: bold;
  }
}

/*去除百度地图的版权信息提示*/
.anchorBL {
  display: none;
}

/* 富文本编辑框 */
.quill-editor {
  .ql-container {
    min-height: 150px;
  }
}

/*头部统计-可点击*/
.overclick-wrap {
  padding: 10px 0 30px;
  text-align: center;

  .item-wrap {
    color: #5F6994;
    background-color: #F6F8FC;
    border-radius: 16px;
    cursor: pointer;

    .item-content {
      margin: 0 auto;
      padding: 30px 50px;
      width: 95%;

      .item-value {
        font-size: 40px;
      }
    }
  }

  .item-wrap.active {
    .item-content {
      border-bottom: 2px solid #409EFF;
      border-color: #409EFF;
    }
  }
}

/* 头部统计-不可点击 */
.overview-wrap {
  padding: 10px 0 30px;
  text-align: center;

  .item-wrap {
    padding: 30px 50px;
    color: #5F6994;
    background-color: #F6F8FC;
    border-radius: 16px;

    .item-value {
      font-size: 40px;
    }
  }
}

.more-btns {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  padding-right: 20px;
  height: 40px;

  .el-dropdown {
    height: 40px;
    line-height: 38px;
    border-radius: 3px;
    background-color: #4CA4FE;
    color: #fff;

    .el-dropdown-link {
      padding: 12px 25px;
      cursor: pointer;
    }
  }

  .el-button--primary {
    height: 40px;
    border-radius: 3px;
    background-color: #409EFF;
  }
}

/*选色卡（字体颜色、背景颜色、type标签）*/
.color-1 {
  color: #FD5E5E; //红
}

.color-2 {
  color: #FFB32D; //黄
}

.color-3 {
  color: #47CFAD; //绿
}

.color-4 {
  color: #4CA4FE //蓝
}

.color-5 {
  color: #7067E2; //紫
}

.color-6 {
  color: #4FBFE9; //绿
}

.color-7 {
  color: #FA6C4D; //橙红
}

.color-8 {
  color: #8890AB; //灰
}

.color-9 {
  color: #2691FF; //深蓝
}

.bg-color-1 {
  background-color: #FD5E5E;
}

.bg-color-2 {
  background-color: #FFB32D;
}

.bg-color-3 {
  background-color: #47CFAD;
}

.bg-color-4 {
  background-color: #4CA4FE;
}

.bg-color-5 {
  background-color: #7067E2;
}

.bg-color-6 {
  background-color: #4FBFE9;
}

.bg-color-7 {
  background-color: #FA6C4D;
}

.bg-color-8 {
  background-color: #8890AB;
}

.type-tags {
  width: 85px;
  height: 23px;
  line-height: 23px;
  color: #fff;
  text-align: center;
  border-radius: 12px;
  font-size: 14px;
}

.tatus-icon-tags {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  top: -2px;
}

.type-color-1 {
  background-color: #FD5E5E;
}

.type-color-2 {
  background-color: #FFB32D;
}

.type-color-3 {
  background-color: #47CFAD;
}

.type-color-4 {
  background-color: #4CA4FE;
}

.type-color-5 {
  background-color: #7067E2;
}

.type-color-6 {
  background-color: #4FBFE9;
}

.type-color-7 {
  background-color: #FA6C4D;
}

.type-color-8 {
  background-color: #8890AB;
}

// 分割线
.dividing-line {
  color: #B3BBD8;
}

// 表单搜索按钮
.form-search-btn {
  background-color: #446BDE;
}

// 返回按钮
.return-btn {
  padding-right: 10px;
  color: #446BDE;
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;

  &::before {
    font-weight: initial;
  }
}

img {
  object-fit: cover;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

// 文本超出省略号
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 录音播放样式 */
.weixinAudio {
  line-height: 1.5;
}

.audio_area {
  display: inline-block;
  width: 130px;
  vertical-align: top;
  margin: 0px 1px 0px 0;
  font-size: 0;
  position: relative;
  font-weight: 400;
  text-decoration: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  cursor: pointer;
}

.audio_wrp {
  border: 1px solid white;
  background-color: #5c90d2;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 10px;
}

.audio_play_area {
  float: left;
  margin: 9px 10px 10px 5px;
  font-size: 0;
  width: 18px;
  height: 20px;
}

.playing .audio_play_area .icon_audio_default {
  display: block;
}

.audio_play_area .icon_audio_default {
  background: transparent url(../assets/images/default/iconloop.png) no-repeat 0 0;
  width: 18px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 18px;
  background-size: 54px 18px;
  background-position: -36px center;
}

.audio_play_area .icon_audio_playing {
  background: transparent url(../assets/images/default/iconloop.png) no-repeat 0 0;
  width: 18px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 18px;
  background-size: 54px 18px;
  -webkit-animation: audio_playing 1s infinite;
  background-position: 0px center;
  display: none;
}

.audio_area .pic_audio_default {
  display: none;
  width: 18px;
}

.tips_global {
  color: white;
}

.audio_area .audio_length {
  float: right;
  font-size: 14px;
  margin-top: 8px;
  margin-left: 1em;
}

.audio_info_area {
  overflow: hidden;
}

.audio_area .progress_bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: white;
  height: 2px;
}

.playing .audio_play_area .icon_audio_default {
  display: none;
}

.playing .audio_play_area .icon_audio_playing {
  display: inline-block;
}

@-webkit-keyframes audio_playing {
  30% {
    background-position: 0px center;
  }

  31% {
    background-position: -18px center;
  }

  61% {
    background-position: -18px center;
  }

  61.5% {
    background-position: -36px center;
  }

  100% {
    background-position: -36px center;
  }
}

// 可信时间
.timeline-trusted-time,
.trusted-time {
  position: absolute;
  top: 5px;
  left: 43px;
  color: #b1b1b1;
  padding: 0 10px;
  border-radius: 11px;

  .el-link--inner {
    color: #b1b1b1;
  }

  &:hover {
    color: #66b1ff;

    .el-link--inner {
      color: #66b1ff;
    }
  }
}

.timeline-trusted-time {
  top: -20px;
  left: 21px;
}

// 暂无数据
.no-data {
  position: relative;
  padding-top: 50px;
  width: 100%;
  height: 250px;
  background: url(../assets/images/home/empty.png) center center no-repeat;
  background-size: 280px 280px;

  .no-data-text {
    position: absolute;
    top: 50%;
    margin-top: 80px;
    width: 100%;
    color: #333;
    text-align: center;
    margin-right: 140px;
    font-size: 18px;
    line-height: 30px;
    opacity: 0.6;
  }
}

// 持续时长
.unreset-alarm-wrap .showTime,
.reset-alarm-wrap .showTime {
  position: relative;
}

.unreset-alarm-wrap .showTime span,
.reset-alarm-wrap .showTime span {
  position: absolute;
  top: 0;
  right: 4px;
  line-height: 20px;
  color: #fff;
}

.el-dialog {
  &.dialog-full-height {
    height: 100%;
  }
}

.el-image-viewer__close {
  .el-icon-circle-close {
    color: #fff;
  }
}

.tree-select--block {
  .tree-select {
    width: 100% !important;
  }
}

.el-radio--nolabel {
  .el-radio__label {
    display: none;
  }
}
